import { GameTeamPK } from '@/services/game/GameController';
import { Button, Card, Divider, Flex, Table, Tag, Typography } from 'antd';
import React, { PropsWithChildren } from 'react';
import GameAbstainTeamDialog from './GameAbstainTeamDialog';
import GameChangeTeamDialog from './GameChangeTeamDialog';
import GameEnterPKInfoDialog from './GameEnterPKInfoDialog';

/**
 * 赛事信息-实时队伍PK信息
 */

interface Props {
  gameId: string;
}

const GameTeamPKTable: React.FC<PropsWithChildren<Props>> = (props) => {
  const { gameId } = props;
  const [teamPK, setTeamPK] = React.useState<GameTeamPK>();
  const [pkTeamCkangeVisible, setPkTeamCkangeVisible] =
    React.useState<boolean>(false);
  const [pkTeamAbstainVisible, setPkTeamAbstainVisible] =
    React.useState<boolean>(false);
  const [pkTeamVisible, setPkTeamVisible] = React.useState<boolean>(false);
  const data = [];
  for (let i = 10; i < 30; i++) {
    data.push({
      key: i,
      tableNo: i,
      teamA: {
        number: '01',
        east: {
          name: 'teamA' + i,
          phone: '15380924588',
        },
        west: {
          name: 'teamA2' + i,
          phone: '15380924588',
        },
      },
      teamB: {
        number: '02',
        south: {
          name: 'teamB',
          phone: '15380924588',
        },
        north: {
          name: 'teamB',
          phone: '15380924588',
        },
      },
    });
  }
  //对阵
  const columnsTeam = [
    {
      title: 'A组',
      width: 40,
      align: 'center',
      render: (_: any, record: any) => (
        <Tag color="#2db7f5" style={{ fontSize: 15, fontWeight: 'bold' }}>
          {record.teamA.number}
        </Tag>
      ),
    },
    {
      title: '姓名',
      children: [
        {
          title: '东',
          width: 70,
          align: 'center',
          render: (_: any, record: any) => (
            <Flex vertical>
              <Typography.Text strong>{record.teamA.east.name}</Typography.Text>
              <Typography.Text type="secondary">
                {record.teamA.east.phone}
              </Typography.Text>
            </Flex>
          ),
        },
        {
          title: '西',
          width: 70,
          align: 'center',
          render: (_: any, record: any) => (
            <Flex vertical>
              <Typography.Text strong>{record.teamA.west.name}</Typography.Text>
              <Typography.Text type="secondary">
                {record.teamA.west.phone}
              </Typography.Text>
            </Flex>
          ),
        },
      ],
    },
    {
      title: '桌号',
      dataIndex: 'tableNo',
      width: 40,
      align: 'center',
      render: (_: any, record: any) => (
        <Typography.Text strong>{record.tableNo}号</Typography.Text>
      ),
    },
    {
      title: '姓名',
      children: [
        {
          title: '南',
          width: 70,
          align: 'center',
          render: (_: any, record: any) => (
            <Flex vertical>
              <Typography.Text strong>
                {record.teamB.south.name}
              </Typography.Text>
              <Typography.Text type="secondary">
                {record.teamB.south.phone}
              </Typography.Text>
            </Flex>
          ),
        },
        {
          title: '北',
          width: 70,
          align: 'center',
          render: (_: any, record: any) => (
            <Flex vertical>
              <Typography.Text strong>
                {record.teamB.north.name}
              </Typography.Text>
              <Typography.Text type="secondary">
                {record.teamB.north.phone}
              </Typography.Text>
            </Flex>
          ),
        },
      ],
    },
    {
      title: 'B组',
      dataIndex: 'teamB.name',
      width: 40,
      align: 'center',
      render: (_: any, record: any) => (
        <Tag color="#f50" style={{ fontSize: 15, fontWeight: 'bold' }}>
          {record.teamB.number}
        </Tag>
      ),
    },
    {
      title: '操作',
      dataIndex: 'gender',
      key: 'gender',
      width: 90,
      align: 'center',
      render: (_: any, record: any) => (
        <>
          <a
            onClick={() => {
              setTeamPK(record);
              setPkTeamCkangeVisible(true);
            }}
          >
            替换
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              setTeamPK(record);
              setPkTeamAbstainVisible(true);
            }}
          >
            弃权
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              setTeamPK(record);
              setPkTeamVisible(true);
            }}
          >
            录入
          </a>
        </>
      ),
    },
  ];

  return (
    <Card title="当前对阵" extra={<Button size="large">全屏显示</Button>}>
      <Table
        columns={columnsTeam}
        dataSource={data}
        bordered
        size="small"
        pagination={{
          pageSize: 100,
          hideOnSinglePage: true,
        }}
        scroll={{ y: '74vh' }}
      />
      {pkTeamCkangeVisible && (
        <GameChangeTeamDialog
          pkData={teamPK}
          gameId={gameId}
          onCancel={setPkTeamCkangeVisible}
        />
      )}
      {pkTeamAbstainVisible && (
        <GameAbstainTeamDialog
          pkData={teamPK}
          gameId={gameId}
          modalVisible={pkTeamAbstainVisible}
          onCancel={setPkTeamAbstainVisible}
        />
      )}
      {pkTeamVisible && (
        <GameEnterPKInfoDialog
          pkData={teamPK}
          gameId={gameId}
          modalVisible={pkTeamVisible}
          onCancel={setPkTeamVisible}
        />
      )}
    </Card>
  );
};
export default GameTeamPKTable;
